{% extends 'account/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Settings
                    <small>Customize your accounts settings.</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-university"></i>  <a href="/courses">Registrar</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ user.first_name }} {{ user.last_name }}
                    </li>
                    <li class="active">
                        <i class="fa fa-gear"></i> Settings
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">General Information</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <div class="form-group">
                                <label>Old Password</label>
                                <input class="form-control"
                                          id="old_password"
                                        name="old_password"
                                 placeholder="Enter Old Password"
                                        type="password">
                                    </div>
                            <div class="form-group">
                                <label>New Password</label>
                                <input class="form-control"
                                      id="password"
                                    name="password"
                             placeholder="Enter New Password"
                                    type="password">
                            </div>
                            <div class="form-group">
                                <label>Repeat New Password</label>
                                <input class="form-control"
                                      id="repeat_password"
                                    name="repeat_password"
                             placeholder="Enter New Password Again"
                                    type="password">
                            </div>
                            <button onclick="ajax_update_password();"
                                     id="update_password_btn"
                                   name="update_password_btn"
                                   type="button"
                                  class="btn btn-lg btn-primary">Change Password</button>
                        </form>
                        
                        <br/>
                        <!-- Error Message Box -->
                        <div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
                        </div><!-- /.Error Message Box -->
                    </div>
                </div>
            </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
<script>
    function ajax_update_password()
    {
        $('#update_password_btn').prop("disabled", true); // Lock button
        $.ajax( 'update_password', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'password': $('#password').val(),
               'repeat_password': $('#repeat_password').val(),
               'old_password': $('#old_password').val(),
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               if (result.status != 'success')
               {
                    print_error(result.message);
               }
               else
               {
                    window.location = "";
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
               $('#update_password_btn').prop("disabled", false); // Unlock button
            }
        });
    }

/**
 * Prints a error box with the contents of the errors received from the server.
 */
function print_error(message)
{
    $('#error_box').prop("hidden", false); // Display error box.
    
    // Iterate through the JSON array of arrays and generate an error string.
    var message = "<b>Error(s):</b><hr/>" + "<p>" + message + "</p>";
    
    // Replace the error string with the contents of the error box.
    $('#error_box').html(message);
}

</script>
{% endblock content %}
